<template>
	<view class="p20">
		<view class="w-max h224 pr">
			<view class="background wh-max radius20">
				<image src="/static/img/my/balance_bg.png" class="wh-max" mode=""></image>
			</view>
			<view class="pa left0 top0 wh-max flex row-between color-fff pl50 pr40">
				<view class=" flex1">
					<view class="fs30">账户余额：</view>
					<view class="mt26">
						<text class="fs26">￥</text>
						<text class="fs40 fw-w">{{$user.deposit||'0'}}</text>
					</view>
				</view>
				<view class="w140 h60 tixian_button radius50 flex row-center" @click="$jump('/pages/my/balance/topUp')">
					充值
				</view>
				<view class="w20"></view>
				<view class="w140 h60 tixian_button radius50 flex row-center"
					@click="$jump('/pages/my/balance/tixian')">提现</view>
			</view>
		</view>
		<view class="pr fs30 flex ml24 mt30 mb30">
			<view class="flex1">钱包明细</view>
			<view class="w200 bg-fff pl20 pr20 mr20 radius10 pr">
				<auto-select ref="cate" :list="data.cateList" @confirm="cate=$event[0].value" />
				<u-input type="select" placeholder="类型" :modelValue="data.cate?data.cate[cate]:''"
					@click="$refs.cate.open()" />
			</view>
			<view class="w200 bg-fff pl20 pr20 mr20 radius10 pr">
				<auto-select ref="days" :list="data.daysList" @confirm="days=$event[0].value" />
				<u-input type="select" placeholder="类型" :modelValue="data.days?data.days[days]:''"
					@click="$refs.days.open()" />
			</view>
		</view>

		<view class="bg-fff radius20 p20">
			<u-empty v-if="!list.length" marginTop="50" />
			<view class="pt30 pb30 border-b" v-for="(item,index) in list" :key="index">
				<view class="flex row-between">
					<view class="u-line-1 flrx1">{{item.info}}</view>
					<view class="fs34 color-red">{{item.num}}</view>
				</view>
				<!-- <view class="flex row-between mt16">
					<view class="fs26 color-666">订单号：{{item.order_sn}}</view>
				</view> -->
				<view class="flex row-between mt16">
					<view class="fs24 color-999">{{item.create_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				data: '',

				keyword: '',
				cate: 'all',
				days: '7',
			};
		},
		watch: {
			keyword(e) {
				this.$u.debounce(this.getList, 500)
			},
			cate(e) {
				this.getList()
			},
			days(e) {
				this.getList()
			},
		},
		onLoad() {
			// this.gatData()
		},
		onShow() {
			this.gatData()
			// this.getList()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			gatData() {
				this.$request('/member/money/moneyInfo').then(res => {

					res.data.cateList = Object.keys(res.data.cate).map(key => {
						return {
							label: res.data.cate[key],
							value: key
						}
					})


					res.data.daysList = Object.keys(res.data.days).map(key => {
						return {
							label: res.data.days[key],
							value: key
						}
					})

					// console.log(res.data);
					this.data = res.data
					this.getList()
				})
			},
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
					cate: this.cate,
					days: this.days,
				}
				this.$request('/member/money/moneyList', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	.tixian_button {
		background-color: transparentize($color: #fff, $amount: .80);
		color: #fff;
		border: #fff 1rpx solid;
	}
</style>